<template>
	<view class="index-container">
		<view class="chunk" :style="{height:chunkHeight + 'px'}"></view>
		<view class="search-box" id="search-box" :class="{active:searchBgFlag}">
			<view class="conetnt" @click="handleToSearch">
				<uni-icons type="search" size="18" color="#00000033"></uni-icons>
				<swiper class="hot" circular :vertical="true" :interval="3500" :autoplay="true">
					<swiper-item v-for="(item,index) in hotSearch" :key="index">
						{{item}}
					</swiper-item>
				</swiper>
			</view>
			<view class="city" @click="handleToCity">
				<text class="name">{{city}}</text>
				<image class="down" src="@/static/index/chevron-down.png"></image>
			</view>
		</view>
		<view class="classify">
			<view class="item" v-for="(item,index) in classify" :key="index" @click="handleGoClassify(item.jumpUrl)">
				<image class="img" :lazy-load="true" :src="getImg(item.img)"></image>
				<text class="title">{{item.title}}</text>
			</view>
		</view>
		<view class="main">
			<view class="banner">
				<swiper circular :interval="3500" :autoplay="true">
					<swiper-item class="img" v-for="(item,index) in banner" :key="index" @click="handleBanner(item)">
						<image class="img" :src="getImg(item.img)"></image>
					</swiper-item>
				</swiper>
			</view>
			<zoneCard title="苹果专区" :data="appleData" :type="1"></zoneCard>
			<zoneCard title="热搜专区" :data="hotSale" :type="2"></zoneCard>
			<zoneCard title="二手专区" :data="towCol" :type="3"></zoneCard>
			<zoneCard title="电脑专区" :data="computer" :type="4"></zoneCard>
			<view class="special-sale">
				<topHead :data="specialSale.headData"></topHead>
				<view class="card-model">
					<swiper class="left-card" circular :interval="3500" :autoplay="true">
						<swiper-item class="img" v-for="(item,index) in specialSale.leftData" :key="index"
							@click="handleSpecial(item)">
							<image class="img" :src="getImg(item.img)"></image>
						</swiper-item>
					</swiper>
					<view class="right-card">
						<image class="top-card" v-if="specialSale.rightTopData"
							:src="getImg(specialSale.rightTopData.img)"
							@click="handleSpecial(specialSale.rightTopData)">
						</image>
						<image class="bottom-card" v-if="specialSale.rightBottomData"
							:src="getImg(specialSale.rightBottomData.img)"
							@click="handleSpecial(specialSale.rightBottomData)"></image>
					</view>
				</view>
			</view>
			<dataList ref="dataList"></dataList>
		</view>
	</view>
</template>
<script>
	import zoneCard from "@/component/index/zoneCard.vue";
	import topHead from "@/component/index/topHead.vue";
	import dataList from "@/component/index/dataList.vue"
	export default {
		name: "index",
		components: {
			zoneCard,
			topHead,
			dataList
		},
		data() {
			return {
				city: "全国",
				chunkHeight: 0,
				searchBgFlag: false,
				hotSearch: [],
				classify: [],
				banner: [],
				appleData: {},
				hotSale: {},
				towCol: {},
				computer: {},
				specialSale: {}
			}
		},
		onLoad() {
			this.getAllData();
		},
		onReady() {
			this.getSearchBoxNode();
		},
		onShow() {
			this.getCurrentCity();
		},
		methods: {
			handleSpecial(item) {
				uni.navigateTo({
					url: `/pagesA/productDetails/productDetails?goods_id=${ item.jumpUrl }`
				})
			},
			handleBanner(item) {
				const dataType = item.jumpUrl.split("=");
				let url = dataType.length > 1 ?
					`/pagesA/category/goods/goodsList/goodsList?id=${dataType[1]}` :
					"/pagesA/business/business";
				uni.navigateTo({
					url,
				})
			},
			handleGoClassify(id) {
				setTimeout(() => {
					uni.$emit('class', {
						id
					})
				}, 300);
				uni.switchTab({
					url: '/pages/class/class',
				})
			},
			getImg(url) {
				return this.$imgURL2 + url;
			},
			setKeyNameData(keyName, params) {
				this[keyName] = params;
			},
			getAllData() {
				uni.request({
					url: this.$apiUrl + "Index/index",
					success: (res) => {
						const allData = res.data.data.data;
						this.setKeyNameData("hotSearch", JSON.parse(allData[0].params));
						this.setKeyNameData("classify", JSON.parse(allData[1].params));
						this.setKeyNameData("banner", JSON.parse(allData[2].params));
						this.setKeyNameData("appleData", JSON.parse(allData[3].params));
						this.setKeyNameData("hotSale", JSON.parse(allData[4].params));
						this.setKeyNameData("towCol", JSON.parse(allData[5].params));
						this.setKeyNameData("computer", JSON.parse(allData[6].params));
						this.setKeyNameData("specialSale", JSON.parse(allData[7].params));
					}
				})
			},
			getCurrentCity() {
				this.city = uni.getStorageSync("city") || "全国";
			},
			getSearchBoxNode() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#search-box').boundingClientRect(data => {
					this.chunkHeight = data.height;
				}).exec();
			},
			handleToSearch() {
				uni.navigateTo({
					url: '/pagesA/search/search'
				})
			},
			handleToCity() {
				uni.getLocation({
					success: (res) => {
						this.city = res.city
					},
					complete: () => {
						uni.navigateTo({
							url: '/pagesA/city/city'
						});
					}
				})
			},
			setNavState(frontColor, backgroundColor) {
				uni.setNavigationBarColor({
					frontColor,
					backgroundColor,
					duration: 700,
				})
			},
		},
		onPageScroll(event) {
			if (event.scrollTop > 10) {
				this.setNavState("#000000", "#ffffff");
				this.searchBgFlag = true;
			} else {
				this.setNavState("#ffffff", "#FA706E");
				this.searchBgFlag = false;
			}
		},
		onReachBottom() {
			this.$refs.dataList.getData();
		},
	}
</script>
<style lang="scss" scoped>
	.index-container {
		height: 2000px;

		.search-box {
			padding: 20rpx 24rpx 18rpx;
			display: flex;
			align-items: center;
			background-color: #FA706E;
			position: fixed;
			top: 0;
			width: 100vw;
			box-sizing: border-box;
			z-index: 100;

			&.active {
				background-color: transparent;

				.conetnt {
					background-color: rgba(47, 47, 47, 0.1);
				}
			}

			.conetnt {
				display: flex;
				background-color: #FFFFFF;
				height: 60rpx;
				width: 578rpx;
				color: #00000033;
				align-items: center;
				border-radius: 46rpx;
				padding: 0 28rpx;
				box-sizing: border-box;
				transition: all .5s;

				.hot {
					margin-left: 12rpx;
					width: 250rpx;
					height: 60rpx;
					line-height: 60rpx;
				}
			}

			.city {
				margin-left: 14rpx;
				color: white;
				display: flex;
				align-items: center;

				.name {
					white-space: nowrap;
					max-width: 100rpx;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.down {
					width: 32rpx;
					height: 32rpx;
					margin-left: 12rpx;
				}
			}
		}

		.classify {
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;
			background-color: white;
			padding: 32rpx 0;

			.item {
				width: 150rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				&:nth-of-type(n + 6) {
					margin-top: 58rpx;
				}

				.img {
					width: 84rpx;
					height: 84rpx;
				}

				.title {
					font-size: 24rpx;
					overflow: hidden;

				}
			}
		}

		.main {
			padding: 0 24rpx;

			.banner {
				width: 702rpx;
				height: 176rpx;
				border-radius: 16rpx;
				text-align: center;
				line-height: 188rpx;
				background-color: #FCF0F0;
				overflow: hidden;

				.img {
					width: 702rpx;
					height: 176rpx;
				}
			}


			.special-sale {
				margin-top: 30rpx;
				padding: 24rpx;
				box-sizing: border-box;
				background: linear-gradient(180deg, #FFFFFF 0%, #FFF9F9 100%);
				box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(116, 116, 116, 0.1);
				border-radius: 16rpx;
				overflow: hidden;

				.card-model {
					display: flex;

					.left-card {
						width: 316rpx;
						height: 378rpx;
						border-radius: 16rpx;
						box-sizing: border-box;
						background-color: #F5F3FF;
						margin-right: 24rpx;

						.img {
							width: 316rpx;
							height: 378rpx;
						}
					}

					.right-card {
						width: 314rpx;
						height: 380rpx;

						.top-card {
							bottom: 24rpx;
							width: 314rpx;
							height: 178rpx;
							margin-bottom: 24rpx;
							border-radius: 16rpx;
						}

						.bottom-card {
							bottom: 24rpx;
							height: 178rpx;
							border-radius: 16rpx;
							width: 314rpx;
						}
					}
				}
			}
		}
	}
</style>
